<template>
  <div>
    <BreakSpace :label="labels[0].title" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      height="400"
      :columns="columns"
      :isSelectColumn="false"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      columnsRef="customerManager_clue_createClue_infoClue_01"
    ></FilterTable>
    <BreakSpace :label="labels[1].title" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      height="400"
      :columns="columnsDLR"
      :isSelectColumn="false"
      :fetchapi="fetchApiDLR"
      :params="fetchParamsDLR"
      :datakey="'records'"
      :onColumnsChange="columnsDLR => (this.columnsDLR = columnsDLR)"
      columnsRef="customerManager_clue_createClue_infoClue_02"
    ></FilterTable>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { formatdateByTime } from '@/utils/index';
import { getFPQUList, getFPDLRList } from '@/api/cms-api/customerManage/clue/createClue';
export default {
  mixins: [dictionary],
  props: {
    cluepatch: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      columns: this.creatHeader(),
      columnsDLR: this.creatHeaderDLR(),
      fetchParams: { clueId: this.cluepatch.clueId }, //参数
      fetchApi: getFPQUList, //ipa 接口
      labels: [
        { title: '线索分配区域经理', id: 'row-01' },
        { title: '线索区域经理分配经销商', id: 'row-02' }
      ],
      fetchParamsDLR: { clueId: this.cluepatch.clueId }, //参数
      fetchApiDLR: getFPDLRList //ipa 接口
    };
  },
  mounted() {},
  methods: {
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '分配时间',
          dataIndex: 'assignSbuDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByTime(props.row.assignSbuDate)} </span>;
          }
        },
        { title: '分配人', dataIndex: 'assignSbuPersionName', sorter: true },
        { title: '被分配区域经理人', dataIndex: 'majorSbuManagerName', sorter: true }
      ];
    },
    creatHeaderDLR() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '分配时间',
          dataIndex: 'assignDlrDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByTime(props.row.assignDlrDate)} </span>;
          }
        },
        { title: '分配人', dataIndex: 'assignDlrPersionName', sorter: true },
        // { title: '分配类型', dataIndex: 'filed', sorter: true },
        { title: '被分配经销商', dataIndex: 'dealerName', sorter: true }
      ];
    }
  }
};
</script>
